import { Modal, Form, Input, Select } from 'antd';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';

export type UserModalProps = {
  id?: string | null;
  title: string;
  show: boolean;
  onCancel: VoidFunction;
};

export default function UserModel({ id, title, show, onCancel }: UserModalProps) {
  const { t } = useTranslation();
  const [form] = Form.useForm();

  const aaa = [
    {
      label: '用户名',
      name: 'name',
      rules: [{ required: true, message: t('sys.login.accountPlaceholder') }],
      component: <Input allowClear />,
    },
    {
      label: '账号',
      name: 'account',
      rules: [{ required: true, message: t('sys.login.accountPlaceholder') }],
      component: <Input allowClear />,
    },
    {
      label: '标签',
      name: 'tag',
      rules: [{ required: true, message: t('sys.login.accountPlaceholder') }],
      component: (
        <Select
          allowClear
          options={[
            { value: 'root', label: '管理员' },
            { value: 'yunying', label: '运营' },
            { value: 'devops', label: '运维' },
          ]}
        />
      ),
    },
  ];

  const [modelLoading, setModelLoading] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  useEffect(() => {
    if (id) {
      setModelLoading(true);
      setTimeout(() => {
        setModelLoading(false);
      }, 2000);
    }
  }, [id, form]);

  return (
    <Modal
      title={title}
      open={show}
      maskClosable={false}
      onOk={() => {
        form.validateFields().then((values) => {
          console.log('onOk', values);
          setConfirmLoading(true);
          setTimeout(() => {
            setConfirmLoading(false);
            onCancel();
          }, 2000);
        });
      }}
      confirmLoading={confirmLoading}
      onCancel={onCancel}
      loading={modelLoading}
    >
      <Form labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} layout="horizontal" form={form}>
        {aaa.map((item) => (
          <Form.Item key={item.name} label={item.label} name={item.name} rules={item.rules}>
            {item.component}
          </Form.Item>
        ))}
      </Form>
    </Modal>
  );
}
